import React, { PureComponent } from 'react';
import { Tooltip } from 'antd';
import { TableC, NoQueryC } from '../../../../components';
import { connect } from 'dva';
import moment from 'moment';
import myStyle from './style.less';

@connect(({ TradeAnalysisNewM }) => ({ TradeAnalysisNewM }))
export default class MarketChange extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      loading: false,
      page: {
        current: 1,
        pageSize: 10,
      },
    };
  }

  componentDidMount() {
    const { searchObj } = this.props;
    if (searchObj) {
      this.getData({
        portId: `${(searchObj.portfolioCodeList || []).join(',')},`,
        startDate: searchObj.beginDate,
        endDate: searchObj.endDate,
        numInPage: 99999,
        currentPage: 1,
      });
    }
  }

  componentDidUpdate(prevProps) {
    if (JSON.stringify(this.props.searchObj) !== JSON.stringify(prevProps.searchObj)) {
      this.getData({
        portId: `${(this.props.searchObj.portfolioCodeList || []).join(',')}`,
        startDate: this.props.searchObj.beginDate,
        endDate: this.props.searchObj.endDate,
        numInPage: 99999,
        currentPage: 1,
      });
    }
  }

  // 表格分页
  handleTableChange = (current, pageSize) => {
    this.setState({
      page: {
        current,
        pageSize,
      },
    });
  };

  onShowSizeChange = (page, pageSize) => {
    this.setState({
      page: {
        current: 1,
        pageSize,
      },
    });
  };

  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });

    this.props.dispatch({
      type: 'tradeAnalysisNewM/getUnusualFluctuation',
      payload: {
        ...searchObj,
      },
      callback: (data) => {
        this.setState({
          tableData: { ...data },
          loading: false,
          page: {
            current: 1,
            pageSize: 10,
          },
        });
      },
    });
  };

  render() {
    const { tableData = {}, loading, page } = this.state;
    const { columns = [], dataSource, pageInfo = {} } = tableData;

    const newColums = columns.map((x) => {
      if (x.key === 'tradingday') {
        return {
          ...x,
          width: '15%',
          // sorter: true,
          sorter: (a, b) => moment(a[x.key]) - moment(b[x.key]),
          type: 'date',
          // sortOrder: sortedInfo.field === x.key ? sortedInfo.order : false
        };
      }
      if (x.key === 'constdesc') {
        return {
          ...x,
          align: 'left',
          // 字符串类型排序
          sorter: (a, b) => {
            const stringA = a[x.key].toUpperCase();
            const stringB = b[x.key].toUpperCase();
            if (stringA < stringB) {
              return -1;
            }
            if (stringA > stringB) {
              return 1;
            }
            return 0;
          },
          type: 'filterCol',
          render: (text) => (
            <Tooltip title={text}>
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</span>
            </Tooltip>
          ),
        };
      } else {
        return {
          ...x,
          // 字符串类型排序
          sorter: (a, b) => {
            const stringA = a[x.key].toUpperCase();
            const stringB = b[x.key].toUpperCase();
            if (stringA < stringB) {
              return -1;
            }
            if (stringA > stringB) {
              return 1;
            }
            return 0;
          },
          width: '15%',
        };
      }
    });
    return JSON.stringify(tableData) == '{}' ? (
      <div>
        <NoQueryC />
      </div>
    ) : (
      <div className={myStyle.tableCls}>
        <TableC
          columns={newColums}
          dataSource={dataSource}
          current={page.current}
          pageSize={page.pageSize}
          // total={pageInfo.total}
          rowKey='KEY'
          loading={loading}
          onPageChange={this.handleTableChange}
          onShowSizeChange={this.onShowSizeChange}
        />
      </div>
    );
  }
}
